<template>
  <div class="store">
    <question-list v-if="questions.length > 0">
      <question-list-item
        v-for="(item, index) in questions"
        :key="index"
        :options="item"
        :index="index"
        @on-click="handleOnClickDetails"
      ></question-list-item>
    </question-list>
    <div v-else class="empty">
      <p>暂无内容</p>
      <el-button class="question-btn" type="primary" @click="$router.push('/home/question')">我要提问</el-button>
    </div>
  </div>
</template>
<script>
import { QuestionList, QuestionListItem } from '@/components/questions';
export default {
  components: { QuestionList, QuestionListItem },
  data() {
    return {
      questions: [],
      show: '',
      param: {
        content: '',
        questionId: ''
      }
    }
  },
  async created() {
    let res = await this.$http.list();
    this.questions = res.data;
  },
  methods: {
    handleOnClickAnswer(options) {
      this.param.content = '';
      this.param.questionId = options ? options._id : ''
      this.show = options ? options._id : ''
    },
    async handleOnSubmit() {
      if (!this.param.content) return this.$message({
        message: '请输入内容',
        type: 'error'
      });

      let res = await this.$http.answer(this.param)
      this.$message({
        message: res.message,
        type: 'success'
      })
      this.handleOnClickAnswer();
    },
    handleOnClickDetails([options, index]) {
      console.log(this.questions[index])
      this.questions[index].readNum++
      // this.$router.push(`/home/questionsDetails/${options._id}`);
    }
  }
}
</script>
<style lang="less" scoped>
.store {
  // background-color: #ffffff;
  .empty {
    width: 100%;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .question-btn {
      width: 100px;
      height: 35px;
      margin-top: 50px;
    }
  }
}
</style>
